<template>
  <div class="container">
        <div class="body">
             <div class="item">
      <div class="title">{{data.unitName}}</div>
<div>许可证号:{{data.newLicenseNo}}</div>
  <div class="height"></div>
<div>经营地址:{{data.productionAddress}}</div>
  <div class="height"></div>
      <div class="tips">食安指数</div>
      <div class="number_wapper">
        <div class="number" :style="{ color: color }">{{data.indexScore}}</div>
        <div class="date">{{data.createTime}}评估完成</div>
      </div>
      <!-- <div class="progress">
        <van-progress
          :percentage="data.indexScore"
          :color="color"
          stroke-width="16"
          :pivot-text="data.indexScore+'分'"
        />
        <div>100分</div>
      </div> -->
      <Progress :width="375" :progress="data.indexScore"/>
    </div>
    <div class="height"></div>
    <div class="item" v-if="data.detailUnitFoodRecordMiddleResponseList&&data.detailUnitFoodRecordMiddleResponseList.length">
      <van-collapse v-model="activeNames">
        <van-collapse-item :title="item.categoryStr" :key="index" :name="index" v-for="(item,index) in data.detailUnitFoodRecordMiddleResponseList">
            <div>扣分详情</div>
            <div v-for="(items,indexs) in item.detailUnitFoodRecordResponseList" :key="indexs">
                {{items.reasonReason}}
            </div>
        </van-collapse-item>
       
      </van-collapse>
    </div>
        <van-empty description="暂未扣分项"  v-else/>
        </div>
  </div>
</template>
<script>
import { timestamp } from "@/utils/token";
import axios from "axios";




import Progress from '@/views/home/Progress'



export default {
  data() {
    return {
      percentage: 90,
      activeNames: [0],
      data: {},
    };
  },
  created() {
    axios
      .get(
        "https://spaq.suzhou.gov.cn/ssa-api/unit/food/safety/update/findByNewLicenseNo",
        {
          params: {
            newLicenseNo: this.$route.query.newLicenseNo,
          },
          headers: {
            timestamp: timestamp(),
          }
        }
      )
      .then((res) => {
        if (res.data.code == 200) {
          this.data = res.data.data;
        } else {
          this.$toast(res.data.msg);
        }
      })
      .catch((err) => {
        console.log(12);
      });
  },
  computed: {
    color() {
      console.log(this.percentage);
      if (this.percentage >= 90) {
        return "#008000";
      } else if (this.percentage >= 60) {
        return "#ffd700";
      } else {
        return "#ff0000";
      }
    },
  },
  components: {
    Progress
}
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: $defaultColor;

  .body{
  padding: $padding;
  background-color: $defaultColor;

  .item {
    padding: $padding;
    background-color: $white;
    border-radius: 10px;
  }
  .title {
    font-size: $title;
    font-weight: 600;
    padding: $padding/2 0;
  }
  .tips {
    color: $default;
  }
  .number_wapper {
    display: flex;
    align-items: baseline;
    .number {
      color: $default;
      font-size: $largeSize;
      margin-right: 10px;
      font-weight: 600;
    }
  }
//   .progress {
//     display: flex;
//     .van-progress__pivot {
//       height: 10px!important;
//     }
//     .van-progress {
//       border-radius: 20px;
//       flex: 1;
//       margin-right: 5px;
//     }
//   }
}
  }

</style>
